<!DOCTYPE html>
<html>

	<head>
		<title>个人页面</title>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
		<link rel="stylesheet" href="/css/reset.css"/>
		<link rel="stylesheet" href="/css/userProfiles.css"/>
		<script src="/js/plugins/jrender/jrender.min.js"></script>
		<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
		<script src="/js/plugins/dialog2/dialog.min.js"></script>
		<script src="/js/common.js"></script>
		<script src="/css/bight/js/neon_text.js"></script>
		<script>
            var params = getParams();
            if(!params.id){//如果没有id, 就当做id为1
                params.id=1;
            }
            //判断是否访问的是自己
            var userStr = sessionStorage.getItem("user");
            if(params.id && userStr){
                var user = JSON.parse(userStr);
                if(params.id==user.id){
                    //访问的是自己:  直接跳到用户的资料页面
                    window.location.href = "/mine/profiles.html";
                }else{
                    //访问不是自己:  判断是否已经关注过
                    $.get(baseUrl+"/users/follow/" + params.id, function (data) {
                        //如果关注过, 改变样式
                        if(data){
                            $("#followBtn").html("取消关注");
                            $("#followBtn").attr("data-num", -1)
                        }
                    });
                }
            }


            $(function () {
                $(document).ready(function(){
                    $('.first_neon').neonText();
                    $('.good').neonText({
                        textColor:'yellow',
                        textSize:'10pt',
                        neonHighlight:'green',
                        neonHighlightColor:'#008000',
                        neonHighlightHover:'#FFFF00',
                        neonFontHover:'gray'
                    });
                });
            })

			$(function () {
                var params = getParams();
                if(params.id){
                    $.get(baseUrl+"/users/" + params.id, function (data) {
                        //渲染个人信息
                        $(".info").renderValues(data);
                        //回显背景
                        $(".bg").css("background-image", "url('"+data.coverImgUrl+"')");
                        //给关注按钮 绑定被关注人的id
                        $("#followBtn").attr("data-id", data.id);
                    })
                }
                //游记的分页数据
                var currentPage = 1;
                var pages;//总页数, 用于判断
                var container = [];//定义一个容器合并数据
                //标记 是否在请求中
                var tag = false;
                query = function () {
                    if(tag){//如果在请求中, 直接返回
                        return;
                    }
                    tag = true;//标记为请求中
                    $.get(baseUrl + "/travels", {currentPage: currentPage, authorId : params.id}, function (data) {
                        //合并数据
                        $.merge(container, data.list);

                        //渲染游记数据
                        var json = {list: container};
                        $("#travels").renderValues(json, {
                            getHref: getHref,
							fake: function (ele, value) {
								$(ele).html(value*2+18);
                            }
                        });
                        pages = data.pages;
                        currentPage++;
                        tag = false;//标记当前请求响应完
                    })
                }
                query();//默认查看第一页

                $(window).scroll(function () {
                    if($(document).scrollTop() + $(window).height() >= $(document).height()){
                        if(currentPage<=pages){
                            query();
                        }else{
                            $(document).dialog({
                                type : 'notice',
                                content: '<span class="info-text">已经到底了</span>',
                                autoClose: 2500
                            });
                        }
                    }
                })
				//-----------------

				//点击关注,  判断是否登录
				$("#followBtn").click(function () {
                    //判断 如果sessionStorage中有user,则已经登录
                    if(userStr){
                        //调用关注的接口
                        var starId = $(this).data("id");//渲染时绑定值
						var num = $(this).data("num");//1则是关注, -1则是取消关注

                        $.ajax({
                            url: baseUrl + "/users/follow/" + starId,
							method: 'put',
							data: {num: num},
							success:function (data) {
                                //修改缓存
                                //刷新页面
								window.location.reload();
                            }
                        });
                    }else{//没登录, 跳转到登录页面
                        window.location.href="/login.html";
                        return;
                    }
                });


                $.get(baseUrl+"/strategyComments/user/"+params.id, function (data) {
                    console.log(data);
                    $("#comments").renderValues({list:data},{
                        getStar:function (item,value) {
                            var temp = '';
                            for (var i = 0; i < value; i++){
                                temp += '<i class="fa fa-star"></i>';
                            }
                            for (var i = 0; i < 5-value; i++){
                                temp += '<i class="fa fa-star-o"></i>';
                            }
                            $(item).html(temp);
                        },
						getHref:getHref
					});
                });

                $.get(baseUrl+"/mytravellists/"+params.id+"/strategies",{currentPage:currentPage},function (data) {
                    console.log(data);
                    $("#userStrategy").renderValues({list:data},{
                        getHref: function (item, value) {
                            var url  = $(item).data("href");
                            $(item).attr("href",url+value);
                        }
                    })
                });
			})
		</script>

	</head>
	<body>
		<div class="container bg" style="background-image: url('/img/user/bg.jpeg');">
			<a href="javascript:window.history.go(-1)" class="my-arrow">
				<span><i class="fa fa-chevron-left fa-2x"></i></span>
			</a>
			<div class="container">
				<div class="info">
					<img class="rounded-circle" width="17%" render-src="headImgUrl">
					<p class="name" render-html="nickName"></p>
					<p render-html="sign"></p>

					<div class="row num">
						<div class="col-2 border border-left-0 border-top-0 border-bottom-0">
							<div>
								<span render-html="followNum"></span>
							</div>
							<div>
								<span>关注</span>
							</div>
						</div>
						<div class="col-2">
							<div>
								<span render-html="fansNum"></span>
									</div>
							<div>
								<span>粉丝</span>
							</div>
						</div>
						<div class="col">
							<a href="/mine/chat.html" class="btn btn-outline-light ibtn" id="letterBtn">私信</a>
							<button class="btn btn-success ibtn" data-num="1" id="followBtn">关注</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="tabs">
			<ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
				<li class="nav-item">
					<a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
						TA的游记[<span>1</span>]
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
						TA的点评[<span>1</span>]
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
						TA的旅行单[<span>0</span>]
					</a>
				</li>
			</ul>
			<div class="container tab-content" id="pills-tabContent">
				<div class="tab-pane fade show active" id="travels">
						<dl class="list" render-loop="list">
							<dd>
								<a data-url="/travelContent.html?id=" render-key="list.id"  render-fun="getHref" data-id="">
									<img  render-src="list.coverUrl">
									<p><span class="title" render-html="list.title"></span>
										<span class="span-right">
						 				<span render-key="list.id" render-fun="fake">6</span> <i class="fa fa-thumbs-o-up"></i></span>
									</p>
								</a>
								<hr>
							</dd>
						</dl>
				</div>

				<div class="comment tab-pane fade " id="comments">
				
					<div render-loop="list"><div class="row">
							<div class="col-2 comment-head">
								<img  class="rounded-circle" render-src="list.user.headImgUrl">
							</div>
							<div class="col">
								<span class="comment-star"  render-key="list.starNum" render-fun="getStar">
									<i class="fa fa-star"></i>
									<i class="fa fa-star"></i>
									<i class="fa fa-star"></i>
									<i class="fa fa-star-o"></i>
									<i class="fa fa-star-o"></i>
								</span>

								<span class="comment-date" render-html="list.createTime"></span>
								<div class="comment-content">
									<a data-url="/mine/strategyComment.html?id=" render-fun="getHref" render-key="list.id" data-id="id">
										<p render-html="list.content"></p>
									</a>
								</div>
								<ul class="comment-img" render-loop="list.imgUrlsArr">
									<li>
										<img  render-src="list.imgUrlsArr.self">
									</li>
								</ul>

								<div class="comment-link">
									<a data-url="/strategyCatalogs.html?id=" render-key="list.strategy.id" render-fun="getHref">
										<img  render-src="list.strategy.coverUrl"> <span render-html="list.strategy.title"></span>
										<i class="fa fa-angle-right fa-2x"></i>
									</a>
								</div>

							</div>
						</div></div>

				</div>
				<div class="tab-pane fade" id="pills-contact">
					<div id="userStrategy">
						<div render-loop="list">
							<ul class="list-group">
								<a data-href="/strategyCatalogs.html?id=" render-key="list.strategy_id" render-fun="getHref">
									<li class="list-group-item d-flex justify-content-between align-items-center">
										<div class="item">
											<img render-src="list.coverUrl" width="30px"/>
											<span render-html="list.title"></span>
											<span class="good">已被加入我的旅游购物车</span>
										</div>
										<div class="item">
											<span style="font-size: 5px;" class="aui-flex-add" >2019-06-04</span>
										</div>
									</li>
								</a>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>

	

</body>
</html>